<template>
  <section class="data-screen-lf">
    <div class="scroll_auto">
      <!-- top -->
      <div class="data-screen-top">
        <div class="data-screen-main-title">
          <span>平均健康度评分</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <div class="data-screen-main-chart">
            <left-chart-1 ref="refLeftChart1" :chart-data="leftChart1Data" :height="'250px'" />
          </div>
        </border-box-13>
      </div>

      <!-- center -->
      <div class="data-screen-center">
        <div class="data-screen-main-title">
          <span>基站健康度分布情况</span>
        </div>
        <border-box-13 class="data-screen-main-cont">
          <!-- <ActiveRingChart :config="leftChart2Config" style="width:300px;height:250px" /> -->
          <left-chart-2 ref="refLeftChart2" :chart-data="leftChart2Data" />
        </border-box-13>
      </div>

      <!-- bottom -->
      <div class="data-screen-bottom">
        <div class="data-screen-main-title">
          <span>五维评分雷达图</span>
        </div>
        <border-box-13 class="data-screen-main-cont" style="padding: 10px;">
          <left-chart-3 ref="refLeftChart3" :chart-data="leftChart3Data" :height="'290px'" />
        </border-box-13>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import LeftChart1 from '../components/chart/LeftChart1.vue'
import LeftChart2 from '../components/chart/LeftChart2.vue'
import LeftChart3 from '../components/chart/LeftChart3.vue'
// api相关
import { apiCommon } from '@/utils/index.js'
import * as screenApi from "@/api/screen/screen";

// datav
import { ActiveRingChart, BorderBox10, BorderBox13 } from '@kjgl77/datav-vue3'



const refLeftChart1 = ref(null)
const refLeftChart2 = ref(null)
const refLeftChart3 = ref(null)

const leftChart1Data = ref({})
// const leftChart2Data = ref({})
const leftChart3Data = ref({})

const leftChart2Config = ref({
  data: [],
  lineWidth: 10
})

// 接口测试
const apiTest = async () => {
  let params = {}
  const testData = await apiCommon(screenApi.getInfo, params)
  console.log(testData)
}
// apiTest()

// 需要点击加载某个图表时 - 点击事件
const resetChart = () => {
  /* refLeftChart1.value.resetChart()
  refLeftChart2.value.resetChart()
  refLeftChart3.value.resetChart() */
}



// 初始化图表数据
const initChartData = () => {
  // getLeftChart1Data()
  // getLeftChart2Data()
  // getLeftChart3Data()
}
initChartData()
</script>

<style lang="scss" scoped>
.data-screen-lf {
  /* display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 394px;
  // height: 100%;
  margin-right: 40px; */

  /* .data-screen-top,
  .data-screen-center,
  .data-screen-bottom {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-top: 54px;
  }

  .data-screen-top {
    height: 37%;
    // background: url("../images/data-screen-main-lt.png") no-repeat;
    background-size: 100% 100%;
  }

  .data-screen-center {
    height: 30%;
    background: url("../images/data-screen-main-lc.png") no-repeat;
    background-size: 100% 100%;
  }

  .data-screen-bottom {
    height: 27%;
    margin-bottom: 0;
    background: url("../images/data-screen-main-lb.png") no-repeat;
    background-size: 100% 100%;
  } */
}
</style>